<template>
	<view class="content">
		<nav-top :showType='1'></nav-top>
		<view class="content-title">
			<view>
				班次浏览
			</view>
			<view class="content-title-rt" @click="showPicker = true">
				<!-- <van-button round type="success"
					size="mini">{{ currentDate ? currentDate.join('') : currentDate }}{{ '-' + prckerClasses[0] }}</van-button> -->
					<van-button round type="success"
						size="mini">{{ roleText }}</van-button>
				<!-- <van-button color="#7232dd"plain></van-button> -->
				<!-- <van-button type="primary"></van-button> -->
			</view>
			<!-- <view class="">
				<van-button plain hairline type="primary" size="small" @click="end">结束当前班次</van-button>
			</view> -->
		</view>
		<view class="content-data">

			<view class="item-data" v-if="shiftCount">
				<view class="page-hd">
					数据摘要
				</view>
				<view class="item">全部合计：{{ filterNum(shiftCount.totalCount) }}￥</view>
				<view class="item">92# 汽油贩卖合计：{{ filterNum(shiftCount.qty92) }}升</view>
				<view class="item">92# 汽油金额合计：{{ filterNum(shiftCount.amount92)}}￥</view>
				<view class="item">95# 汽油贩卖合计：{{ filterNum(shiftCount.qty95) }}升</view>
				<view class="item">95# 汽油金额合计：{{ filterNum(shiftCount.amount95) }}￥</view>
				<view class="item">98# 汽油贩卖合计：{{ filterNum(shiftCount.qty98) }}升</view>
				<view class="item">98# 汽油金额合计：{{ filterNum(shiftCount.amount98) }}￥</view>
				<view class="item">0# 柴油贩卖合计：{{ filterNum(shiftCount.qty0) }}升</view>
				<view class="item">0# 柴油金额合计：{{ filterNum(shiftCount.amount0) }}￥</view>
			</view>
			<view class="item-data" v-else>
					<view class="page-hd">
						数据摘要
					</view>
					<view class="item">全部合计：0￥</view>
					<view class="item">92# 汽油贩卖合计：0升</view>
					<view class="item">92# 汽油金额合计：0￥</view>
					<view class="item">95# 汽油贩卖合计：0升</view>
					<view class="item">95# 汽油金额合计：0￥</view>
					<view class="item">98# 汽油贩卖合计：0升</view>
					<view class="item">98# 汽油金额合计：0￥</view>
					<view class="item">0# 柴油贩卖合计：0升</view>
					<view class="item">0# 柴油金额合计：0￥</view>
				</view>
		</view>
			<!-- <van-popup v-model:show="showPicker" position="bottom">
				<van-picker-group :tabs="['选择日期', '选择班次']" next-step-text="下一步" @confirm="onConfirm"
					@cancel="showPicker = false">
					<van-date-picker v-model="currentDate" :columns-type="columnsType" :min-date="minDate" :max-date="maxDate" />
					<van-picker v-model="prckerClasses" :columns="columns" @confirm="onConfirmClasses"
						@cancel="onCancelClasses" />
				</van-picker-group>
				<van-picker v-model="prckerClasses" :columns="columns" @confirm="onConfirmClasses"
					@cancel="onCancelClasses" />
			</van-popup> -->
			<van-popup v-model:show="showPicker" round position="bottom">
				<van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
			</van-popup>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		watchEffect,
		onMounted,
		watch
	} from 'vue'
	import NavTop from '@/components/NavTop.vue'
	import api from '@/api/order.js'
	import $store from "@/store";
	export default {
		props: {},
		components: {
			NavTop
		},
		setup(props, ctx) {
			const data = reactive({
				showPicker: false,
				minDate: new Date(1999, 0, 1),
				currentDate: '',
				// columns: [{
				// 		text: '1',
				// 		value: '1'
				// 	},
				// 	{
				// 		text: '2',
				// 		value: '2'
				// 	}
				// ],
				columns: [],
				prckerClasses: ['1'],
				shiftCount: {},
				roleText: '',
				shiftId: ''
			})
			const ceratedDate = () => {
				const currentDates = new Date();

				// 获取年、月、日
				const year = currentDates.getFullYear();
				let month = currentDates.getMonth() + 1;
				month = month < 10 ? '0' + month : month; // 如果月份小于10，则在前面补0
				let day = currentDates.getDate();
				day = day < 10 ? '0' + day : day; // 如果日期小于10，则在前面补0

				// 拼接成指定格式的字符串
				data.currentDate = [year, month, day]
				if($store.state.areaId) {
					getShiftCount(`${data.currentDate.join('')}-${data.prckerClasses[0]}`)
				}
			}
			const getShiftCount = (shiftId) => {
				api.shiftCount({
					shiftId,
					gasStationId: $store.state.areaId
				}).then((res) => {
					data.shiftCount = res.data;
				})
			}
			const getShiftList = () => {
				api.shiftList({
					gasStationId: $store.state.areaId
				}).then(res => {
					res.rows.forEach(val => {
						data.columns.push({
							text: val.name,
							value: val.shiftId
						})
					})
					data.roleText = data.columns[0].text
					data.shiftId = data.columns[0].value
					getShiftCount(data.shiftId)
				})
			}
			onMounted(() => {
				// ceratedDate()
				getShiftList();
			})
			watchEffect(() => {
				data.funcDatas = props.funcData
			})
			const onConfirm = ({
				selectedOptions
			}) => {
				// data.currentDate = selectedValues;
				// console.log('selectedValues', data.prckerClasses, 'asdas', data.currentDate)
				// data. = selectedOptions[0].value
				data.roleText = selectedOptions[0].text
				data.shiftId = selectedOptions[0].value
				getShiftCount(data.shiftId);
				data.showPicker = false;
			};
			const onConfirmClasses = () => {

			}
			const onCancelClasses = () => {

			}
			watch($store.state, (newVal, oldVal) => {
				if(newVal.areaId) {
					// data.shiftList
					getShiftList();
					// getShiftCount(`${data.currentDate.join('')}-${data.prckerClasses[0]}`)
				}
			}, {
				deep: true
			})
			const filterNum = (val) => {
				let num;
				if(!val) {
					num = 0
				}
				return !val ? 0 : val
			}
			const end = () => {
				
			}
			return {
				...toRefs(data),
				onConfirm,
				onConfirmClasses,
				onCancelClasses,
				filterNum,
				end
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.content-title {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			margin-top: 20rpx;

			.content-title-rt {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				text-align: left;
				margin-left: 40rpx;

				image {
					width: 22rpx;
					font-weight: 200;
					vertical-align: middle;
				}

				text {
					display: block;
					text-indent: 10rpx;
				}
			}
		}

		.content-data {
			width: 100%;
			height: calc(100vh - 190rpx);
			padding: 0 20rpx;
			overflow-y: auto;
			box-sizing: border-box;
			padding-bottom: 20rpx;

			.page-hd {
				box-sizing: border-box;
				padding-left: 20rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				border-bottom: 1px solid rgba(0, 0, 0, .1);
			}

			.item-data {
				position: relative;
				margin-top: 20rpx;
				box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .1);
				border-radius: 20rpx;
				font-size: 26rpx;
				padding: 20rpx 0;

				.item {
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>